<template>
  <div class="move" :style="{ transform: `translate( ${left}px, ${top}px )` }">
    <div class="player" :class="runClass()"></div>
    <!-- {{left}}
    {{top}} -->
  </div>

  <!--  -->
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    // front 前面 back 背面 left 左边 right 右边
    direction: {
      type: String,
      default: () => {
        return "right";
      },
    },
    // 角色默认为男性 man woman
    gender: {
      type: String,
      default: () => {
        return "man";
      },
    },
    top: Number,
    left: Number,
  },
  setup(props) {
    // 监听位置改变 进行动画
    const runClass = () => {
      console.log("runClass");
      const className = {};
      className[props.direction] = true;
      className[props.gender] = true;
      return className;
    };
    // const topPid = ref(0),
    // leftPid = ref(0);
    // watch(
    //   () => props.top,
    //   (val, oldVal) => {
    //     // js 控制移动
    //     const interval = (val - oldVal) / 100;
    //     const player = document.querySelector(".player")
    //     topPid.value = setInterval(() => {
    //       player.style.top = player.style.top + interval;
    //       if(interval>0){
    //         player.style.top
    //       }
    //     }, 10);
    //   }
    // );
    return {
      runClass,
    };
  },
});
</script>

<style lang="scss" scoped>
.move {
  position: absolute;
  z-index: 2;
  transition: 0.5s all linear;
  top: 0px;
  left: 0px;
}
.player {
  width: 50px;
  height: 48px;

  // transform: scale(0.7);
  // background-position: -656px 0px;
  &.left {
    animation: runLeft 0.5s infinite step-start;
  }
  &.right {
    animation: runRight 0.5s infinite step-start;
  }
  &.front {
    animation: runFront 0.5s infinite step-start;
  }
  &.back {
    animation: runBack 0.5s infinite step-start;
  }
  &.man {
    background: url("/image/player-run.png") no-repeat -330px 0;
  }
  &.woman {
    background: url("/image/player-run-woman.png") no-repeat -330px 0;
  }
}
@keyframes runLeft {
  0% {
    background-position: -0px -50px;
  }
  25% {
    background-position: -50px -50px;
  }
  50% {
    background-position: -100px -50px;
  }
  75% {
    background-position: -50px -50px;
  }
  100% {
    background-position: -0px -50px;
  }
}

@keyframes runRight {
  0% {
    background-position: -0px -100px;
  }
  25% {
    background-position: -50px -100px;
  }
  50% {
    background-position: -100px -100px;
  }
  75% {
    background-position: -50px -100px;
  }
  100% {
    background-position: -0px -100px;
  }
  // 0% {
  //   background-position: -0px -100px;
  // }
  // 50% {
  //   background-position: -100px -100px;
  // }
  // 100% {
  //   background-position: -0px -100px;
  // }
}

@keyframes runFront {
  0% {
    background-position: -0px -0px;
  }
  25% {
    background-position: -50px -0px;
  }
  50% {
    background-position: -100px -0px;
  }
  75% {
    background-position: -50px -0px;
  }
  100% {
    background-position: -0px -0px;
  }
}

@keyframes runBack {
  0% {
    background-position: -0px -150px;
  }
  25% {
    background-position: -50px -150px;
  }
  50% {
    background-position: -100px -150px;
  }
  75% {
    background-position: -50px -150px;
  }
  100% {
    background-position: -0px -150px;
  }
}
</style>
